<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>剑桥英语</title>
    <link rel="stylesheet" href="css/init.css">
    <link rel="stylesheet" href="css/headerFooter.css">
    <link rel="stylesheet" href="css/userIndex.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/table.css">
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<header class="container clearfix">
    <div class="header">
        <img src="./img/logo.png" width="52px" height="59px" alt="">
        <div class="headerLine"></div>
        <img class="jqlogo" src="./img/logoName.png" width="150px" height="55px" alt="">
        <img class="right rightImg" width="110px" height="33px" src="./img/logoRight.png" alt="">
    </div>
</header>
<div class="headerBg"></div>
<div class="container clearfix ">
    <div class="bread clearfix">
        <a href="index.html">首页 > </a><a href="upload.html" class="active">上传报名表格</a>
        <div class="loginState">
            <span class="loginName">你好，aaa</span>
            <span class="loginAbout"><span id="restPwd"><a href="resetPwd.html" style="color: #F9B100">修改密码</a></span> | <span id="logout">退出</span></span>
        </div>
    </div>
    <div class="titleName">
        <span class="line"></span><span class="name">上传报名表格</span><span class="line"></span>
    </div>
    <div class="userCon">
        <div class="about">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;剑桥英语青少版扩展阅读系列丛书引进并改编自Success with Reading英文原版，配套合剑桥英语青少版的进阶式补充阅读教程，每本教程由
            近100篇阅读文章和精心选配的图片、实用的练习题组成。阅读材料全部取自原汁原味的英语文章，学生可以从中学习到地道的英语句法结构和表达
            写紧扣时代潮流，内容符合中学生的学习趣，有助于进一步了解世界万象，同时提高语言能力。
        </div>
        <div class="uploadCon">
            <input type="file" id="btn_file" style="display:none">
            <span class="uploadName">选择文件:</span>
            <div class="uploadInput clearfix">
                <span class="uploadAbout" ></span>
                <span class="upload_file"><i class="uploadIcon"></i>上传文件</span>
            </div>
            <div class="login" style="text-align: center">
                <span id="confirm">提交</span>
            </div>
        </div>
    </div>
    <div class="tableList" style="position: fixed;left: 100%">
        <table id="dataTable" class="table">
            <thead>
            <tr>
                <th>序列号</th>
                <th>email</th>
                <th>中文姓名</th>
                <th>身份证号</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Gender</th>
                <th>手机号</th>
                <th>居住地</th>
                <th>科目</th>
                <th>考试时间</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄河北石家庄河北石家庄河北石家庄河北石家庄河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>119726363@qq.com</td>
                    <td>张三</td>
                    <td>13011111111111111</td>
                    <td>san</td>
                    <td>san</td>
                    <td>2000-01-02</td>
                    <td>male</td>
                    <td>13988888888</td>
                    <td>河北石家庄</td>
                    <td>线上</td>
                    <td>北京</td>
                </tr>
            </tbody>
        </table>
        <div class="page">
            <div id="page"></div>
        </div>
        <div class="login" style="text-align: center">
            <span id="tableConfirm">确认提交</span>
        </div>
    </div>
    <div class="confirmSucc container clearfix" style="display: none">
        <img class="succImg" src="img/confirmSucc.png" alt="">
        <div class="succNotice">上传完成</div>
        <div class="login" id="back"><span>返回</span></div>
    </div>
</div>

<div class="bottomBg1" style="margin-top: -30px"></div>
<div class="bottomBg2">
    <div class="container clearfix">
        <div class="bottomBlock bottomBlock1">
            <div class="bottomBlockTitle" style="margin-bottom: 25px">
                <span>我要咨询</span><span class="line"></span><span>Consulting</span>
            </div>
            <a class="bottomBlockName" href="question.html">考试常见问题FAQ</a>
            <a class="bottomBlockName" href="javascript:;">在线课程咨询</a>
            <a class="bottomBlockName" href="cooperation.html">商务合作</a>
        </div>
        <div class="bottomBlock bottomBlock2">
            <div class="bottomBlockTitle" style="margin-bottom: 50px">
                <span>在线课程</span><span class="line"></span><span>Online Courses</span>
            </div>
            <a class="bottomBlockName" href="javascript:;">进入课程</a>
        </div>
    </div>
</div>
<!--页尾-->
<footer class="footer clearfix" style="margin-top: 0">
    <div class="container clearfix">
        <div class="footerTitle">剑桥领思中国运营中心</div>
        <div class='footerLeft'>
            <div>客服电话</div>
            <div class="line"><span ></span></div>
            <div class="info"><i class="footerIcon phone"></i>400-100-8565 </div>
            <div style="font-size: 12px">（周一至周日 08:00 – 20:00）</div>
        </div>
        <div class='footerCenter'>
            <div>客服邮箱</div>
            <div class="line"><span></span></div>
            <div class="info"><i class="footerIcon email"></i>service@piloteducation.cn</div>
        </div>
        <div class='footerRight right'>
            <img class="" src="./img/logoName.png" width="175px" height="64px" alt="">
        </div>
    </div>

</footer>
<div class="copyRight">
    京公网安备11011302000942号 <a href="https://beian.miit.gov.cn/" style="color:#fff">ICP备案许可证：京ICP备13031798号-1</a> Copyright 2005 - 2020 领航文化 All Rights Reserved
</div>


<!--退出登录-->
<div class="logoutModel">
    <div class="logoutCon">
        <div><img src="./img/logout.png" alt=""></div>
        <div>您将退出本次登录</div>
        <div><span class="cancel">取消</span><span class="yes">确定</span></div>
    </div>
</div>

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/common.js"></script>
<script src="js/fixedTable.js"></script>
<script src="layui/layui.js"></script>
<script>
    $(document).ready(function(){
        // 表格初始化
        var table = new FixedTable("dataTable", 3);
        // 表格中的确认
        // 显示逻辑先为了展示看
        $('#confirm').click(function () {
            $('.userCon').hide();
            $('.tableList').css({'position':'relative','left':'0'});//解决表格表头紊乱bug
        })

        $('#tableConfirm').click(function () {
            window.scrollTo(0,0);
            $('.tableList').css({'position':'fixed','left':'100%'});//解决表格表头紊乱bug
            $('.confirmSucc').show();

        })
        // 上传成功返回
        $('#back').click(function () {
            window.scrollTo(0,0);
            $('.confirmSucc').hide();
            $('.userCon').show();
        })
        // 分页逻辑
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: 50 //数据总数，从服务端得到
                ,limit:15//一页15条
                ,jump: function(obj, first){
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数

                    //首次不执行
                    if(!first){
                        //执行ajax
                    }
                }
            });
        });


        // 文件上传逻辑
        $('.upload_file').click(function () {
            $('#btn_file').trigger('click')
        })
        $('#btn_file').change(function () {
            var filename = document.getElementById("btn_file").value;
            console.log(filename)
            $('.uploadAbout').html(filename)
            // UpladFile()
        })
        function UpladFile() {
            var fileObj = document.getElementById("btn_file").files[0]; // js 获取文件对象
            var url =  "http://localhost:8080" + "/api/attachment/upload"; // 接收上传文件的后台地址

            var form = new FormData(); // FormData 对象
            form.append("file", fileObj); // 文件对象

            xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
            xhr.onload = uploadComplete; //请求完成
            xhr.onerror =  uploadFailed; //请求失败

            xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
            xhr.upload.onloadstart = function(){//上传开始执行方法
                ot = new Date().getTime();   //设置上传开始时间
                oloaded = 0;//设置上传开始时，以上传的文件大小为0
            };

            xhr.send(form); //开始上传，发送form数据
        }
        //上传成功响应
        function uploadComplete(evt) {
            //服务断接收完文件返回的结果
            var data = JSON.parse(evt.target.responseText);
            if(data.success) {
                alert("上传成功！");
            }else{
                alert("上传失败！");
            }
        }
        //上传失败
        function uploadFailed(evt) {
            alert("上传失败！");
        }
        //取消上传
        function cancleUploadFile(){
            xhr.abort();
        }
        //上传进度实现方法，上传过程中会频繁调用该方法
        function progressFunction(evt) {
            var progressBar = document.getElementById("progressBar");
            var percentageDiv = document.getElementById("percentage");
            // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
            if (evt.lengthComputable) {//
                progressBar.max = evt.total;
                progressBar.value = evt.loaded;
                percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
            }
            var time = document.getElementById("time");
            var nt = new Date().getTime();//获取当前时间
            var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
            ot = new Date().getTime(); //重新赋值时间，用于下次计算
            var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
            oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
            //上传速度计算
            var speed = perload/pertime;//单位b/s
            var bspeed = speed;
            var units = 'b/s';//单位名称
            if(speed/1024>1){
                speed = speed/1024;
                units = 'k/s';
            }
            if(speed/1024>1){
                speed = speed/1024;
                units = 'M/s';
            }
            speed = speed.toFixed(1);
            //剩余时间
            var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
            time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';
            if(bspeed==0) time.innerHTML = '上传已取消';
        }
    });
</script>
</body>
</html>
